<template>
    <div class="boxtc">
        <div class="hedaertc">设备运行总览</div>
        <div class="contenttc">
            <div class="contenttcTop">
                <div class="contenttcTopItems">
                    <div class="contenttcTopItemsTitle">
                        所有设备今日运行时长
                    </div>
                    <div class="contenttcTopItemsContent">
                        <taiBanVue ref="taiBanTata1"></taiBanVue>
                        <div class="kongde" v-if="JinRiSheBeiYunXinShiChang">暂无数据</div>
                        <loading v-if="JinRiSheBeiYunXinShiChangLoading"></loading>
                    </div>
                </div>
                <div class="contenttcTopItems">
                    <div class="contenttcTopItemsTitle">
                        所有设备今日开机时长
                    </div>
                    <div class="contenttcTopItemsContent">
                        <taiBanVue ref="taiBanTata2"></taiBanVue>
                        <div class="kongde" v-if="jinRiKaiJiShiChengShow">暂无数据</div>
                        <loading v-if="jinRiKaiJiShiChengLoading"></loading>
                    </div>
                </div>
                <div class="contenttcTopItems">
                    <div class="contenttcTopItemsTitle">
                        所有设备今日运行时间占比
                    </div>
                    <div class="contenttcTopItemsContent">
                        <yiBiaoPanVue :id="'cf1'" ref="jinRiShiJianZhanBi"></yiBiaoPanVue>
                        <div class="kongde" v-if="jiRiYunZhanBiShow" style="line-height: 245px;">暂无数据</div>
                        <loading v-if="jiRiYunZhanBiLoading" style="top: -20px;"></loading>
                    </div>
                </div>
                <div class="contenttcTopItems">
                    <div class="contenttcTopItemsTitle">
                        所有设备今日运行状态
                    </div>
                    <div class="contenttcTopItemsContent">
                        <pie ref="zhuangtai"></pie>
                        <div class="kongde" v-if="jinRiSheiBeiStyang" style="line-height: 245px;">暂无数据</div>
                        <loading v-if="jinRiSheiBeiStyangLoading" style="top: -20px;"></loading>
                    </div>
                </div>
                <div class="contenttcTopItems">
                    <div class="contenttcTopItemsTitle">
                        所有设备今日各状态时长
                    </div>
                    <div class="contenttcTopItemsContent">
                        <zhuZhuangTuVue :id="'fffs'" ref="jinRiZhuangTaiData"></zhuZhuangTuVue>
                        <div class="kongde" v-if="jinRiZhuangTaiShow" style="line-height: 242px;">暂无数据</div>
                        <loading v-if="jinRiZhuangTaiLoading" style="top: -20px;"></loading>
                    </div>
                </div>
            </div>
            <!-- 中间部分 -->
            <div class="contenttcButtom">
                <div class="contenttcButtomItems">
                    <div class="contenttcButtomItemsTitle">
                        设备今日运行数据
                    </div>
                    <div class="contenttcButtomItemsContent">
                        <jiRiYunShuJuVue></jiRiYunShuJuVue>
                    </div>
                </div>
                <div class="contenttcButtomItems">
                    <div class="contenttcButtomItemsTitle">
                        所有设备过去7天运行时长
                    </div>
                    <div class="contenttcButtomItemsContent">
                        <taiBanVue ref="taiBanTata3"></taiBanVue>
                        <div class="kongde" v-if="guoQuQiTianShiChengShow">暂无数据</div>
                        <loading v-if="guoQuQiTianShiChengLoading"></loading>

                    </div>
                </div>
                <div class="contenttcButtomItems">
                    <div class="contenttcButtomItemsTitle">
                        所有设备过去7天开机时长
                    </div>
                    <div class="contenttcButtomItemsContent">
                        <taiBanVue ref="taiBanTata4"></taiBanVue>
                        <div class="kongde" v-if="GuoQuQiTianKaiJiShiChengShow">暂无数据</div>
                        <loading v-if="GuoQuQiTianKaiJiShiChengLoading"></loading>
                    </div>
                </div>
                <div class="contenttcButtomItems">
                    <div class="contenttcButtomItemsTitle">
                        所有设备过去7天运行时间占比
                    </div>
                    <div class="contenttcButtomItemsContent">
                        <yiBiaoPanVue :id="'cf2'" ref="guoQuQiTianShiJianZhanBi"></yiBiaoPanVue>
                        <div class="kongde" v-if="guoQuQiTianYunZhanBiShow" style="line-height: 242px;">暂无数据</div>
                        <loading v-if="guoQuQiTianYunZhanBiLoading" style="top: -20px;"></loading>
                    </div>
                </div>
            </div>
            <!-- 下部分 -->
            <div class="contenttcButtom">
                <div class="contenttcButtomItems">
                    <div class="contenttcButtomItemsTitle">
                        所有设备过去7天各状态时长
                    </div>
                    <div class="contenttcButtomItemsContent">
                        <zhuZhuangTuVue :id="'v'" ref="guoqiqitianzhanbi"></zhuZhuangTuVue>
                        <div class="kongde" v-if="qiTianZhuangTaishow" style="line-height: 242px;">暂无数据</div>
                        <loading v-if="qiTianZhuangTaiLoading" style="top: -20px;"></loading>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
import axios from 'axios'
// 设备数采最新记录
import pie from './com/pie.vue';
import yiBiaoPanVue from './com/yiBiaoPan.vue';
import taiBanVue from './com/taiBan.vue';
import zhuZhuangTuVue from './com/zhuZhuangTu.vue';
import jiRiYunShuJuVue from './com/jiRiYunShuJu.vue';
import loading from '../../components/Loading.vue'
export default {
    components: {
        pie,
        yiBiaoPanVue,
        taiBanVue,
        zhuZhuangTuVue,
        jiRiYunShuJuVue,
        loading,
    },
    data() {
        return {
            JinRiSheBeiYunXinShiChang: false,//所有设备今日运行时长数据
            jinRiKaiJiShiChengShow: false,//所有设备今日开机时长数据
            jiRiYunZhanBiShow: false,//所有设备今日运行时间占比
            guoQuQiTianYunZhanBiShow: false,//所有设备过去7天运行时间占比
            GuoQuQiTianKaiJiShiChengShow: false,//所有设备过去7天开机时长
            guoQuQiTianShiChengShow: false,//设备过去7天运行时长
            jinRiSheiBeiStyang: false,//所有设备今日运行状态
            jinRiZhuangTaiShow: false,//所有设备今日各状态时长
            qiTianZhuangTaishow: false,//所有设备过去7天各状态时长
            JinRiSheBeiYunXinShiChangLoading: true,
            jinRiKaiJiShiChengLoading: true,
            jiRiYunZhanBiLoading: true,
            jinRiSheiBeiStyangLoading: true,
            jinRiZhuangTaiLoading: true,
            qiTianZhuangTaiLoading: true,
            guoQuQiTianShiChengLoading: true,
            GuoQuQiTianKaiJiShiChengLoading: true,
            guoQuQiTianYunZhanBiLoading: true
        };
    },

    mounted() {
        this.getJinRiSheBeiYunXinShiChang()
        this.jinRiKaiJiShiCheng()
        this.jinRiSuoYouSheBeiYunXingZhuangTai()
        this.guoQuQiTianShiCheng()
        this.getGuoQuQiTianKaiJiShiCheng()
        this.jiRiYunZhanBi()
        this.guoQuQiTianYunZhanBi()
        this.jinRiGeSheBeiShiCHeng()
        this.qiTianGeSheBeiShiCHeng()
        this.querys()

    },

    methods: {
        querys() {
            var thats = this
            // 每隔3分钟就刷新一次接口
            setInterval(() => {
                thats.getJinRiSheBeiYunXinShiChang()
                thats.jinRiSuoYouSheBeiYunXingZhuangTai()
                thats.guoQuQiTianShiCheng()
                thats.getGuoQuQiTianKaiJiShiCheng()
                thats.jinRiKaiJiShiCheng()
                thats.jiRiYunZhanBi()
                thats.guoQuQiTianYunZhanBi()
                thats.qiTianGeSheBeiShiCHeng()

            }, 180000)
        },
        // 请求接口，获取所有设备今日运行时长数据
        getJinRiSheBeiYunXinShiChang() {
            axios({
                method: "get",
                url: `${window.location.origin}/apigateway/api/widget/1659507079152250881`,
                headers: {
                    apiKey: "a92a7db58b234595951bb2b39fcf6430",
                },
            }).then((res) => {
                this.JinRiSheBeiYunXinShiChangLoading = false
                if (res.data.data[0].hours) {
                    this.JinRiSheBeiYunXinShiChang = false
                } else {
                    this.JinRiSheBeiYunXinShiChang = true
                    this.$refs.taiBanTata1.taiBanTata = {
                        getinfos: '',
                        gettips: '',
                        color: ''
                    }
                }

                this.$refs.taiBanTata1.taiBanTata = {
                    getinfos: res.data.data[0].hours ? res.data.data[0].hours.toFixed(2) : '00.00',
                    gettips: '所有设备今日运行时长',
                    color: 'rgb(94, 255, 172)'
                }
            }).catch(err => {
                this.JinRiSheBeiYunXinShiChangLoading = false
                this.JinRiSheBeiYunXinShiChang = true
                this.$refs.taiBanTata1.taiBanTata = {
                    getinfos: '',
                    gettips: '',
                    color: ''
                }
            });
        },
        // 请求接口，获取所有设备今日开机时长数据
        jinRiKaiJiShiCheng() {
            axios({
                method: "get",
                url: `${window.location.origin}/apigateway/api/widget/1659507732972941314`,
                headers: {
                    apiKey: "a92a7db58b234595951bb2b39fcf6430",
                },
            }).then((res) => {
                this.jinRiKaiJiShiChengLoading = false
                if (res.data.data[0].hours) {
                    this.jinRiKaiJiShiChengShow = false
                    this.$refs.taiBanTata2.taiBanTata = {
                        getinfos: '',
                        gettips: '',
                        color: ''
                    }
                } else {
                    this.jinRiKaiJiShiChengShow = true
                }
                this.$refs.taiBanTata2.taiBanTata = {
                    getinfos: res.data.data[0].hours ? res.data.data[0].hours.toFixed(2) : '00.00',
                    gettips: '所有设备今日开机时长',
                    color: '#fff'
                }
            }).catch(err => {
                this.jinRiKaiJiShiChengLoading = false
                this.jinRiKaiJiShiChengShow = true
                this.$refs.taiBanTata2.taiBanTata = {
                    getinfos: '',
                    gettips: '',
                    color: ''
                }
            });
        },
        // 请求接口，获取所有设备过去7天开机时长数据
        getGuoQuQiTianKaiJiShiCheng() {
            axios({
                method: "get",
                url: `${window.location.origin}/apigateway/api/widget/1659509467741270018`,
                headers: {
                    apiKey: "a92a7db58b234595951bb2b39fcf6430",
                },
            }).then((res) => {
                this.GuoQuQiTianKaiJiShiChengLoading = false
                if (res.data.data[0].hours) {
                    this.GuoQuQiTianKaiJiShiChengShow = false;
                } else {
                    this.GuoQuQiTianKaiJiShiChengShow = true;
                    this.$refs.taiBanTata4.taiBanTata = {
                        getinfos: '',
                        gettips: '',
                        color: ''
                    }
                }
                this.$refs.taiBanTata4.taiBanTata = {
                    getinfos: res.data.data[0].hours ? res.data.data[0].hours.toFixed(2) : '00.00',
                    gettips: '所有设备过去7天开机时长',
                    color: '#fff'
                }
            }).catch(err => {
                this.GuoQuQiTianKaiJiShiChengLoading = false
                this.GuoQuQiTianKaiJiShiChengShow = true;
                this.$refs.taiBanTata4.taiBanTata = {
                    getinfos: '',
                    gettips: '',
                    color: ''
                }
            });
        },
        // 请求接口，获取所有设备过去7天运行时长数据
        guoQuQiTianShiCheng() {
            axios({
                method: "get",
                url: `${window.location.origin}/apigateway/api/widget/1659508328929013762`,
                headers: {
                    apiKey: "a92a7db58b234595951bb2b39fcf6430",
                },
            }).then((res) => {
                this.guoQuQiTianShiChengLoading = false
                if (res.data.data[0].hous) {
                    this.guoQuQiTianShiChengShow = false;
                } else {
                    this.guoQuQiTianShiChengShow = true;
                    this.$refs.taiBanTata3.taiBanTata = {
                        getinfos: '',
                        gettips: '',
                        color: ''
                    }

                }

                this.$refs.taiBanTata3.taiBanTata = {
                    getinfos: res.data.data[0].hous ? res.data.data[0].hous.toFixed(2) : '00.00',
                    gettips: '设备过去7天运行时长',
                    color: 'rgb(94, 255, 172)'
                }
            }).catch(err => {
                this.guoQuQiTianShiChengLoading = false
                this.guoQuQiTianShiChengShow = true;
                this.$refs.taiBanTata3.taiBanTata = {
                    getinfos: '',
                    gettips: '',
                    color: ''
                }

            });
        },
        // 所有设备今日运行状态
        jinRiSuoYouSheBeiYunXingZhuangTai() {
            axios({
                method: "get",
                url: `${window.location.origin}/apigateway/api/widget/1659482152147726337`,
                headers: {
                    apiKey: "a92a7db58b234595951bb2b39fcf6430",
                },
            }).then((res) => {
                var zhuangTai = []
                this.jinRiSheiBeiStyangLoading = false
                if (res.data.data.length > 0) {
                    this.jinRiSheiBeiStyang = false;
                } else {
                    this.jinRiSheiBeiStyang = true;
                    zhuangTai = []
                }
                zhuangTai = res.data.data.map(items => {
                    return {
                        value: items.hous.toFixed(0),
                        name: items.groupBy_status
                    }
                })

                this.$refs.zhuangtai.options.data = zhuangTai
                this.$refs.zhuangtai.initCharts()
            }).catch(err => {
                this.jinRiSheiBeiStyangLoading = false
                this.jinRiSheiBeiStyang = true;
                zhuangTai = []
            });
        },
        // 所有设备今日运行时间占比
        jiRiYunZhanBi() {
            axios({
                method: "get",
                url: `${window.location.origin}/apigateway/api/widget/1659483712974073857`,
                headers: {
                    apiKey: "a92a7db58b234595951bb2b39fcf6430",
                },
            }).then((res) => {
                this.jiRiYunZhanBiLoading = false
                if (res.data.data[0].运行除以开机) {
                    this.jiRiYunZhanBiShow = false
                } else {
                    this.jiRiYunZhanBiShow = true
                    this.$refs.jinRiShiJianZhanBi.options.data = 0
                    this.$refs.jinRiShiJianZhanBi.options.title = ''
                }
                this.$refs.jinRiShiJianZhanBi.options.data = res.data.data[0].运行除以开机 ? (res.data.data[0].运行除以开机 * 100).toFixed(0) : 0
                this.$refs.jinRiShiJianZhanBi.options.title = '今日运行时间占比'
                this.$refs.jinRiShiJianZhanBi.initCharts()
            }).catch(err => {
                this.jiRiYunZhanBiLoading = false
                this.jiRiYunZhanBiShow = true
                this.$refs.jinRiShiJianZhanBi.options.data = 0
                this.$refs.jinRiShiJianZhanBi.options.title = ''
            });
        },
        // 所有设备过去7天运行时间占比
        guoQuQiTianYunZhanBi() {
            axios({
                method: "get",
                url: `${window.location.origin}/apigateway/api/widget/1660492821974331393`,
                headers: {
                    apiKey: "a92a7db58b234595951bb2b39fcf6430",
                },
            }).then((res) => {
                this.guoQuQiTianYunZhanBiLoading = false
                if (res.data.data[0].运行除以开机) {
                    this.guoQuQiTianYunZhanBiShow = false;
                } else {
                    this.guoQuQiTianYunZhanBiShow = true;
                    this.$refs.guoQuQiTianShiJianZhanBi.options.data = 0
                    this.$refs.guoQuQiTianShiJianZhanBi.options.title = ''
                }
                this.$refs.guoQuQiTianShiJianZhanBi.options.data = res.data.data[0].运行除以开机 ? (res.data.data[0].运行除以开机 * 100).toFixed(0) : 0
                this.$refs.guoQuQiTianShiJianZhanBi.options.title = '七天运行时间占比'
                this.$refs.guoQuQiTianShiJianZhanBi.initCharts()
            }).catch(err => {
                this.guoQuQiTianYunZhanBiLoading = false
                this.guoQuQiTianYunZhanBiShow = true;
                this.$refs.guoQuQiTianShiJianZhanBi.options.data = 0
                this.$refs.guoQuQiTianShiJianZhanBi.options.title = ''
            });
        },
        // 所有设备今日各状态时长
        jinRiGeSheBeiShiCHeng() {
            axios({
                method: "get",
                url: `${window.location.origin}/apigateway/api/widget/1659485440419147778`,
                headers: {
                    apiKey: "a92a7db58b234595951bb2b39fcf6430",
                },
            }).then((res) => {
                var das = []
                console.log(res.data.data, '所有设备今日各状态时长');
                this.jinRiZhuangTaiLoading = false
                if (res.data.data.length > 0) {
                    this.jinRiZhuangTaiShow = false
                } else {
                    this.jinRiZhuangTaiShow = true
                    this.$refs.jinRiZhuangTaiData.source = []
                }
                res.data.data.forEach(items => {
                    var bs = {
                        product: '',
                    }
                    if (items.设备 == 'S1') {
                        bs.product = items.设备
                        if (items.状态 == '停机') {
                            bs.停机 = items.hour
                        } else if (items.状态 == '运行') {
                            bs.运行 = items.hour
                        } else if (items.状态 == '待机') {
                            bs.待机 = items.hour
                        } else if (items.状态 == '故障') {
                            bs.故障 = items.hour
                        }
                    } else if (items.设备 == 'S2') {
                        bs.product = items.设备
                        if (items.状态 == '停机') {
                            bs.停机 = items.hour
                        } else if (items.状态 == '运行') {
                            bs.运行 = items.hour
                        } else if (items.状态 == '待机') {
                            bs.待机 = items.hour
                        } else if (items.状态 == '故障') {
                            bs.故障 = items.hour
                        }
                    } else if (items.设备 == 'S3') {
                        bs.product = items.设备
                        if (items.状态 == '停机') {
                            bs.停机 = items.hour
                        } else if (items.状态 == '运行') {
                            bs.运行 = items.hour
                        } else if (items.状态 == '待机') {
                            bs.待机 = items.hour
                        } else if (items.状态 == '故障') {
                            bs.故障 = items.hour
                        }
                    } else if (items.设备 == 'S4') {
                        bs.product = items.设备
                        if (items.状态 == '停机') {
                            bs.停机 = items.hour
                        } else if (items.状态 == '运行') {
                            bs.运行 = items.hour
                        } else if (items.状态 == '待机') {
                            bs.待机 = items.hour
                        } else if (items.状态 == '故障') {
                            bs.故障 = items.hour
                        }
                    } else if (items.设备 == 'S5') {
                        bs.product = items.设备
                        if (items.状态 == '停机') {
                            bs.停机 = items.hour
                        } else if (items.状态 == '运行') {
                            bs.运行 = items.hour
                        } else if (items.状态 == '待机') {
                            bs.待机 = items.状态
                        } else if (items.状态 == '故障') {
                            bs.故障 = items.hour
                        }
                    }
                    das.push(bs)
                });
                console.log(das, '所有设备今日各状态时长');
                this.$refs.jinRiZhuangTaiData.source = das
                this.$refs.jinRiZhuangTaiData.initCharts()
            }).catch(err => {
                this.jinRiZhuangTaiLoading = false
                this.jinRiZhuangTaiShow = true
                this.$refs.jinRiZhuangTaiData.source = []
            });
        },


        // 所有设备过去7天各状态时长
        qiTianGeSheBeiShiCHeng() {
            axios({
                method: "get",
                url: `${window.location.origin}/apigateway/api/widget/1660492921421279233`,
                headers: {
                    apiKey: "a92a7db58b234595951bb2b39fcf6430",
                },
            }).then((res) => {
                var qitianbi = [];
                this.qiTianZhuangTaiLoading = false
                if (res.data.data.length > 0) {
                    this.qiTianZhuangTaishow = false;
                } else {
                    this.qiTianZhuangTaishow = true;
                    this.$refs.guoqiqitianzhanbi.source = []
                }
                res.data.data.forEach(items => {
                    var bs = {
                        product: '',
                    }
                    if (items.设备 == 'S1') {
                        bs.product = items.设备
                        if (items.状态 == '停机') {
                            bs.停机 = items.hour
                        } else if (items.状态 == '运行') {
                            bs.运行 = items.hour
                        } else if (items.状态 == '待机') {
                            bs.待机 = items.hour
                        } else if (items.状态 == '故障') {
                            bs.故障 = items.hour
                        }
                    } else if (items.设备 == 'S2') {
                        bs.product = items.设备
                        if (items.状态 == '停机') {
                            bs.停机 = items.hour
                        } else if (items.状态 == '运行') {
                            bs.运行 = items.hour
                        } else if (items.状态 == '待机') {
                            bs.待机 = items.hour
                        } else if (items.状态 == '故障') {
                            bs.故障 = items.hour
                        }
                    } else if (items.设备 == 'S3') {
                        bs.product = items.设备
                        if (items.状态 == '停机') {
                            bs.停机 = items.hour
                        } else if (items.状态 == '运行') {
                            bs.运行 = items.hour
                        } else if (items.状态 == '待机') {
                            bs.待机 = items.hour
                        } else if (items.状态 == '故障') {
                            bs.故障 = items.hour
                        }
                    } else if (items.设备 == 'S4') {
                        bs.product = items.设备
                        if (items.状态 == '停机') {
                            bs.停机 = items.hour
                        } else if (items.状态 == '运行') {
                            bs.运行 = items.hour
                        } else if (items.状态 == '待机') {
                            bs.待机 = items.hour
                        } else if (items.状态 == '故障') {
                            bs.故障 = items.hour
                        }
                    } else if (items.设备 == 'S5') {
                        bs.product = items.设备
                        if (items.状态 == '停机') {
                            bs.停机 = items.hour
                        } else if (items.状态 == '运行') {
                            bs.运行 = items.hour
                        } else if (items.状态 == '待机') {
                            bs.待机 = items.状态
                        } else if (items.状态 == '故障') {
                            bs.故障 = items.hour
                        }
                    }
                    qitianbi.push(bs)
                });
                this.$refs.guoqiqitianzhanbi.source = qitianbi
                this.$refs.guoqiqitianzhanbi.initCharts()
            }).catch(err => {
                this.qiTianZhuangTaiLoading = false
                this.qiTianZhuangTaishow = true;
                this.$refs.guoqiqitianzhanbi.source = []
            });
        }

    },

};
</script>
<style  scoped>
.boxtc {
    overflow: auto;
    width: 100%;
    height: 100vh;
    /* padding: 0 0 10px 0; */
    /* background: url("../../assets/bgc1.png") 100% 100% no-repeat; */
    background-size: 100% 100%;
    /* background-color: #101129; */
    background: #002754;

}

.hedaertc {
    width: 100%;
    height: 80px;
    background: url("https://app.maibozhineng.com/oss/files/img/header-bg123.png") 100% 100% no-repeat;
    background-size: 100% 100%;
    margin-top: 8px;
    font-size: 28px;
    font-family: Segoe UI letiable-Semibold Display, Segoe UI letiable;
    font-weight: normal;
    color: #ffffff;
    line-height: 80px;
    text-align: center;
}

.contenttc {
    /* background-color: crimson; */
    width: 100%;
    height: calc(100% - 108px);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background: rgba(0, 0, 0, 1);
}

/* 滚动槽 */
::-webkit-scrollbar-track {
    background: rgba(43, 43, 43, 1);
    -webkit-box-shadow: 1px 0px 0px 0px rgba(255, 255, 255, 0.07) inset;
    border-radius: 0px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background: rgba(249, 249, 249, 0.3);
    -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0) inset;
    border-radius: 10px;
}

.contenttcTop {
    box-sizing: border-box;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 20px;
}

.contenttcTopItems {
    width: 100%;
    margin-right: 10px;
    height: 300px;
    /* background: #004491; */
    /* background-color: var(--widget-content-bg-color)!important; */
    background-color: rgba(255, 255, 255, 0.06);
    border: 2px solid transparent;
    border-image: linear-gradient(135deg, #4287f5, #6696ffe0) 1;
}

.contenttcTopItems:nth-child(1) {
    margin-right: 10px;
    width: 25%;
}

.contenttcTopItems:nth-child(2) {
    margin-right: 10px;
    width: 25%;
}

.contenttcTopItems:nth-child(3) {
    margin-right: 10px;
    width: 25%;
}

.contenttcTopItems:nth-child(4) {
    margin-right: 10px;
    width: 25%;
}

.contenttcTopItems:nth-child(5) {
    margin-right: 0PX;
    width: 50%;
}

.contenttcTopItemsTitle {
    padding: 8px 10px;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: 700;
    width: 100%;
    color: #fff;
    border-bottom: 2px solid #3f65ae;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.contenttcTopItemsContent {
    position: relative;
    width: 100%;
    height: calc(100% - 48px);
}

.contenttcButtom {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    min-height: 310px;
    padding: 0 10px;
    margin-top: 10px;
    /* background-color: red; */
}

.contenttcButtomItems {
    width: 100%;
    min-height: 320px;
    /* background: #004491; */
    background-color: rgba(255, 255, 255, 0.06);
    margin-right: 10px;
    border: 2px solid transparent;
    border-image: linear-gradient(135deg, #4287f5, #6696ffe0) 1;
}

.contenttcButtomItems:last-child {
    margin-right: 0px;
    width: 49%;
}

.contenttcButtomItems:nth-child(2) {
    width: 50%;
}

.contenttcButtomItemsTitle {
    padding: 8px 10px;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    color: #fff;
    border-bottom: 2px solid #3f65ae;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

}

.contenttcButtomItemsContent {
    position: relative;
    width: 100%;
    height: calc(100% - 48px);
}

.contenttcButtom:nth-child(3) {
    height: 200px !important;

}

.contenttcButtom:nth-child(3) .contenttcButtomItems {
    width: 100%;
    min-height: 200px;
}

.contenttcButtom:nth-child(2) .contenttcButtomItems:nth-child(1) {
    width: 50%;
    min-height: 200px;
}

.contenttcButtom:nth-child(2) .contenttcButtomItems:nth-child(2) {
    width: 16.04%;
    min-height: 200px;
}

.contenttcButtom:nth-child(2) .contenttcButtomItems:nth-child(3) {
    width: 16.04%;
    min-height: 200px;
}

.contenttcButtom:nth-child(2) .contenttcButtomItems:nth-child(4) {
    width: 16.04%;
    min-height: 200px;
}

.kongde {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: calc(100% - -9px);
    line-height: 280px;
    text-align: center;
    color: aliceblue;
}
</style>
  